import React, { useEffect, useState,useCallback } from 'react';
import { Button, Table,Row,Col,Space,Popconfirm,message   } from 'antd';
import { DeleteOutlined, FormOutlined,PlusOutlined } from '@ant-design/icons'
import { useNavigate } from 'react-router-dom';
import request, { baseUrl } from '../../utils/request';

const Userlist = ()=>{
    const navigate = useNavigate()
    const columns = [
      {
        title: '#',
        key:'user_id',
        width: 200,
        render(text, record,index){
            return index+1
        }
      },
      {
        title: '管理者名单',
        dataIndex: 'username',
        width:200,
        key:'manager',
      },
      {
        title: '密码',
        dataIndex: 'password',
        width:200,
      },
      {
        title:'操作',
        dataIndex: 'id',
            width: 200,
            render(text,item) {
                return (
                    // <React.Fragment>
                    <Space>
                        <Button ghost type='primary' icon={<FormOutlined />} size="small" onClick={editItem.bind(null,item.user_id)}></Button>
                        <Popconfirm 
                        title="确认删除"
                        onConfirm={removeItem.bind(null, item.user_id)}
                        >
                            <Button danger icon={<DeleteOutlined />} size="small"></Button>
                        </Popconfirm>
                    </Space>
                )
            }
      }
    ];
    const [datalist,setDatalist]=useState([]);

    const getData = async()=>{
            const {data} = await request.get('user/userlist')
            setDatalist(data.data)
        }

    useEffect(()=>{
        getData()
    },[])

    const editItem = useCallback((id)=>
    navigate ('/manage/user_change/'+id)
    ,[])

    const removeItem = useCallback(async(id)=>{
        const data = await request.post('/user/remove/'+id)
        if (data.data.code === 200) {
            message.success('管理者数据删除成功')
            getData()
        }
    },[datalist])

    const rowSelection = {
        onChange(selectedRowKeys, selectedRows){
            setSelectIds(selectedRowKeys)
        }
    }

    const [selectIds, setSelectIds] = useState([])
    const removeItems = useCallback(async () => {
        if(selectIds.length === 0){
            return message.warning('请选择删除的数据');
        }

        const { data } = await request.post('/user/remove', {
            data: {
                ids: selectIds
            }
        })

        if (data.code === 200) {
            message.success('数据删除成功')
            getData()
        }
    }, [selectIds])

    return (
        <div>
            <Row gutter={20}>
                <Col span={8}>
                    <Button type='primary' icon={<PlusOutlined />} onClick={()=>{
                        navigate('/manage/user_add')
                    }}>添加</Button>
                </Col>
                <Col span={16} className='text-right'>
                        <Popconfirm title="确认删除" onConfirm={removeItems}>
                            <Button danger icon={<DeleteOutlined />}>批量删除</Button>
                        </Popconfirm>
                </Col>
            </Row>
            <Table 
            rowSelection={rowSelection}
            columns={columns} 
            dataSource={datalist} 
            rowKey="user_id"
            />
        </div>
    );
}

export default Userlist;